<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="../css/mui.min.css" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">查询人员信息</h1>
		</header>
		<div class="mui-content">
			<div id="" class="mui-content-padded">
				<div class="mui-input-group">
					<div class="mui-input-row">
						<label>id：</label>
						<input type="text" id="userid" value='1' />
					</div>
					<div class="mui-input-row">
						<label>name：</label>
						<input type="text" id="username" value='李白' />
					</div>
					<div class="mui-input-row">
						<label>age：</label>
						<input type="text" id="userage" value='15' />
					</div>
					<div class="mui-input-row">
						<label>address：</label>
						<input type="text" id="useraddress" value='临沂' />
					</div>
					<div class="mui-button-row">
						<button type="button" id="findall" class="mui-btn mui-btn-primary">findall</button>
						<button type="button" id="findone" class="mui-btn mui-btn-primary">findone</button>
						<button type="button" id="save" class="mui-btn mui-btn-primary">save</button>
					</div>
				</div>
			</div>
			<div id="response" style="margin-top:10px;">人员信息:</div>
		</div>
	</body>
	<script type="text/javascript" src="../js/mui.min.js"></script>
	<script type="text/javascript">
		mui.init();
		var url = "http://192.168.10.193:8080/"
		var responseEl = document.getElementById("response");
		var callback_findAll = function(results) {
			responseEl.innerText = '';
			for(var i in results) {
				responseEl.innerText += results[i].id + " " + results[i].name + " " + results[i].age + " " + results[i].address + "\n";
			}
			
		}

		var callback_findById = function(result) {
			responseEl.innerText = result.id + " " + result.name + " " + result.age + " " + result.address + "\n";
		}
		var callback_save = function(result) {
			mui.toast("添加成功")
			document.getElementById("userid").value = result.id;
		}
		document.getElementById("findall").addEventListener("tap", function() {
			console.log("hello");
			mui.getJSON(url + "findAll", null, callback_findAll);
		});
		document.getElementById("findone").addEventListener("tap", function() {
			mui.getJSON(url + "findById?id=" + document.getElementById("userid").value, null, callback_findById);
		});
		/*document.getElementById("save").addEventListener("tap",function(){
			var temp_url="";
			var name = document.getElementById("username").value;
			var age = document.getElementById("userage").value;
			var address = document.getElementById("useraddress").value;
			temp_url=url+"save?"+"name="+name+"&"+"age="+age+"&"+"address="+address;
			console.log(temp_url);
			mui.getJSON(temp_url,null,callback_save);
		});*/
		document.getElementById("save").addEventListener("tap", function() {
			console.log("hello world");
			var name = document.getElementById("username").value;
			var age = document.getElementById("userage").value;
			var address = document.getElementById("useraddress").value;
			var data = {
				name: name,
				age: age,
				address: address
			}
			//mui.post(url+"save",data,callback_save,'json');
			mui.getJSON(url + "save", data, callback_save);
		});
	</script>

</html>